<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车详情页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    <link rel="stylesheet" href="../elementui/index.css">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/videoDetail.css">
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<style>
    ul.IsignUp li{
        margin-top:5px;
    }
    input.inputLine{
        width:226px;
        padding: .375rem .75rem;
        border-radius: .25rem;
        border: 0px solid;
        border-color: rgba(250, 250, 250, 0.96);
    }

    input.inputLeft{
        width:130px;
    }
    button,select{
        padding: .375rem .75rem;
        border-radius: .25rem;
        border: 1px solid #ced4da;
    }
    button:hover,select:hover{
        border-color: #03a9f4;
    }
    button:active {
        background:#03a9f4;
    }
    .el-button{
        background: orange;
        font-size: 20px;

    }
</style>
<body>
<div id="app">
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/login/qichezulin.png" alt="" class="logo">
            <ul>

                <li class="check"><a href="../index.html">自驾租车</a></li>

            </ul>
            <div class="search">
                <div class="left">车型<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/public/search.png" alt="">
            </div>

            <div class="login" v-show="f1">
                <a href="./loginAndRegister/login.html">登陆</a>
                /
                <a href="./loginAndRegister/register.html">注册</a>
            </div>

            <div class="user" v-show="f2">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>{{member.memberName}}</li>
                        <a :href="'./ordercenter.html?memberId='+member.memberId">
                            <li>订单中心</li>
                        </a>
                        <a href="./loginAndRegister/login.html">
                            <li class="out">退出登陆</li>
                        </a>
                    </ul>
                </div>
            </div>

        </div>
    </nav>
    <div class="all">
        <div class="crumbs">
            <span>首页</span>
            <span>></span>
            <span>车辆列表</span>
            <span>></span>
            <span>下单付款</span>
        </div>
    </div>
    <!-- 主体内容 -->
    <main>
        <div class="classDetail">
            <div class="left" style="width: 2000px;position: relative;right: 400px">
                <form action="/carOrder/pay" method="post" style="text-align: center">
                    <span style="font-size: 20px">订单号：</span><input style="font-size: 20px;width: 200px" class="inputLeft inputLine" type="text"   name="outTradeNo" v-model="this.pagination.out_trade_no" readonly ><br/><br/><br/>
                    <span style="font-size: 20px">订单名称：</span><input  style="font-size: 20px;width: 200px" class="inputLeft inputLine" type="text"  name="subject" v-model="this.pagination.subject" readonly ><br/><br/><br/>
                    <span style="font-size: 20px">付款金额：</span><input  style="font-size: 20px;width: 200px" class="inputLeft inputLine" type="text"  name="totalAmount" v-model="this.pagination.total_amount" readonly ><br/><br/><br/>
                    <input style="width: 200px" type="submit" class="el-button" value="下单">
                </form>


            </div>



        </div>

    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 |
                    营业执照
                    | 教师资格证公示
                </p>
                <p>
                    京ICP备10218183号-1 京ICP证161188号 七易时代科技有限公司 | 地址：北京市大兴区 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                </p>
                <p>在线教育许可证：小优课堂经营许可证20188008号 | 互联网教育服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>
</div>
</body>
<script>

    new Vue({
        el: "#app",
        data: {
            pagination:{
                out_trade_no:"",
                subject:"",
                total_amount:"",
                body:"汽车租赁",

            },
            f1:true,
            f2:false,
            member:"",

        },
        methods: {
            findOrderId(){
                var url = location.href;
                var orderId = url.substring(url.indexOf("orderId")+8,url.indexOf("orderId")+16)
                var title = url.substring(url.indexOf("title")+6,url.indexOf("title")+16)
                var price = url.substring(url.indexOf("price")+6,url.indexOf("price")+16)
                this.pagination.out_trade_no=orderId;
                this.pagination.subject=title;
                this.pagination.total_amount=price;
                this.pagination.body="";
            },
            initParams(){
                var str = window.sessionStorage.getItem("login");
                if(str!=null && str!=""){
                    this.member = JSON.parse(str);
                    this.f2=true;
                    this.f1=false;
                }else{
                    this.f1=true;
                    this.f2=false;
                }
            }

        },
        created() {
            this.findOrderId();

        },
        mounted() {
            this.initParams();
        }

    })
</script>
</html>
</html>